<template>
    <view class="bg-content">
        <div style="background-color: white;">
            <u-dropdown ref="uDropdown" :border-bottom="true">
                <u-dropdown-item title="筛选数据">
                    <view class="slot-content">
                        <view style="padding: 15px; background-color: white;" v-if="validateForm.controls">
                            <u-form ref="validateFormRef" :model="validateForm.value" :label-width="250">
                                <u-form-item label="名称" prop="name">
                                    <u-input v-model="validateForm.value.name" placeholder="请输入名称"/>
                                </u-form-item>
                                <u-form-item label="是否公用动态类型" prop="isCommon">
                                    <u-input type="select" :select-open="validateForm.controls.isCommon.isShow"
                                             v-model="validateForm.controls.isCommon.textDesc"
                                             placeholder="请选择是否公用动态类型" @click="validateForm.controls.isCommon.isShow = true; $forceUpdate();"></u-input>
                                </u-form-item>
                                <u-form-item label="状态" prop="status">
                                    <u-input type="select" :select-open="validateForm.controls.status.isShow"
                                             v-model="validateForm.controls.status.textDesc"
                                             placeholder="请选择状态" @click="validateForm.controls.status.isShow = true; $forceUpdate();"></u-input>
                                </u-form-item>
                            </u-form>

                            <div style="display: flex;">
                                <div style="width: 100%;">
                                    <u-button type="primary" @click="validateForm.resetValues()">重置过滤条件</u-button>
                                </div>
                                <div style="width: 100%;">
                                    <u-button type="error" @click="validateForm.doSearch(_self, communityDynamicTypeList)">搜索</u-button>
                                </div>
                            </div>
                        </view>
                    </view>
                </u-dropdown-item>
            </u-dropdown>
        </div>

        <div v-if="validateForm.controls">
            <u-select mode="single-column" label-name="name" value-name="code" :mask-close-able="false"
                      v-model="validateForm.controls.isCommon.isShow" :list="validateForm.controls.isCommon.options"
                      :default-value="validateForm.controls.isCommon.defaultValue"
                      @cancel="validateForm.controls.isCommon.isShow = false; $forceUpdate();"
                      @confirm="UFormUtil.selectSingleColumnConfirm($event, validateForm.controls.isCommon)"></u-select>

            <u-select mode="single-column" label-name="name" value-name="code" :mask-close-able="false"
                      v-model="validateForm.controls.status.isShow" :list="validateForm.controls.status.options"
                      :default-value="validateForm.controls.status.defaultValue"
                      @cancel="validateForm.controls.status.isShow = false; $forceUpdate();"
                      @confirm="UFormUtil.selectSingleColumnConfirm($event, validateForm.controls.status)"></u-select>
        </div>

        <scroll-view scroll-x="true">
            <div class="table table-bordered" style="width: 700px; text-align: center; background-color: white; overflow: auto;">
                <div class="tr">
                    <div class="td" style="width: 150px;">图标</div>
                    <div class="td" style="width: 100px;">名称</div>
                    <div class="td" style="width: 150px;">其他用户是否可发布</div>
                    <div class="td" style="width: 100px;">状态</div>
                    <div class="td" style="width: 100px;">显示顺序</div>
                    <div class="td" style="width: 100px;">操作</div>
                </div>
                <div class="tr" v-for="(item, index) in communityDynamicTypeList" :key="item.id">
                    <div class="td" style="width: 150px;">
                        <myImg :obj="item"
                               :sysFile="{fkId: item.id}"
                               :customStyle="'pointer-events: none; height: 100px;  width:100px; background-size: cover; background-repeat: no-repeat; background-position: center;'"
                               :imageView="'imageView2/1/w/300/h/300'"
                        ></myImg>
                    </div>
                    <div class="td" style="width: 100px;">{{item.name | toEmptyStr}}</div>
                    <div class="td" style="width: 150px;">{{item.isCommonText | toEmptyStr}}</div>
                    <div class="td" style="width: 100px;">{{item.statusText | toEmptyStr}}</div>
                    <div class="td" style="width: 100px;">{{item.displayOrder | toEmptyStr}}</div>
                    <div class="td" style="width: 100px;">
                        <div style="margin-top: 5px; text-decoration: underline;"
                             @click="navigateTo('/pages/sub/sub3-community-platform/community-platform/community-platform-dynamic-type/community-platform-dynamic-type-edit/index', null, item)">
                            编辑
                        </div>
                        <div style="margin-top: 10px; margin-bottom: 10px; text-decoration: underline;" @click="deleteItem(item, index)">
                            删除
                        </div>
                    </div>
                </div>
            </div>
        </scroll-view>

        <div style="padding-top: 10px; padding-bottom: 10px;">
            <u-loadmore :status="pagination.status" bg-color="#eeeeee"/>
        </div>

        <div style="padding-bottom: 60px;"></div>

        <div class="custom-bottom-button">
            <label @click="navigateTo('/pages/sub/sub3-community-platform/community-platform/community-platform-dynamic-type/community-platform-dynamic-type-add/index')">
                添加商城动态类型
            </label>
        </div>
    </view>
</template>

<script>

    import {TbCommunityDynamicTypeService} from "@/dev/services/tb-community-dynamic-type.service";
    import {CommonUtil} from "@/dev/core/utils/common.util";
    import {UFormUtil} from "@/dev/core/utils/u-form.util";
    import {SysDictionaryService} from "@/dev/services/sys-dictionary.service";
    import myImg from '@/components/my-img'

    export default {
        data() {
            return {
                validateForm: {
                    value: {
                        communityId: this.globalVariable.userInfo.tbStore.communityId,
                        name: '',
                        isCommon: '',
                        status: '',
                    },
                },
                communityDynamicTypeList: []
            }
        },
        components: {
            myImg
        },
        onReady() {
            const _self = this;
            new SysDictionaryService().optionList('tb_community_dynamic_type@is_common', null).then(result => {
                UFormUtil.setOptions(_self.validateForm.controls.isCommon, result);
                _self.$forceUpdate();
            });

            new SysDictionaryService().optionList('status', null).then(result => {
                UFormUtil.setOptions(_self.validateForm.controls.status, result);
                _self.$forceUpdate();
            });
        },
        onShow() {
            this.doRefresh(this.communityDynamicTypeList);
        },
        // 上拉加载
        onReachBottom: function () {
            if (this.pagination.hasNextPage) {
                this.doInfinite();
            }
        },
        methods: {
            /**
             * 加载更多数据中
             * @param infiniteScroll
             */
            doInfinite(infiniteScroll) {
                const _self = this;
                new TbCommunityDynamicTypeService().findTableTbCommunityDynamicTypeList({
                    pagination: _self.pagination,
                    data: Object.assign({}, _self.validateForm.value)
                }).then(result => {
                    _self.pagination.refreshPage(result);
                    _self.communityDynamicTypeList = [..._self.communityDynamicTypeList, ...result.list];
                    _self.$forceUpdate();
                });
            },
            /**
             * 删除
             */
            deleteItem(item, index) {
                const _self = this;
                CommonUtil.alert({
                    title: '提示！',
                    content: '你确定要删除吗？',
                    showCancel: true, // 是否显示取消按钮
                    success: function (res) {
                        if (res.cancel) { // 点击取消,默认隐藏弹框

                        } else { // 点击确定
                            new TbCommunityDynamicTypeService().batchDeleteTbCommunityDynamicTypeByIds(item.id).then(result => {
                                CommonUtil.toast('删除成功');
                                _self.communityDynamicTypeList.splice(index, 1);
                            });
                        }
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
